﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
</head>
<link href="../plugins/layui2/css/layui.css" rel="stylesheet" />
<link href="css/main.css" rel="stylesheet" />
<body>
    <div class="layui-body" style="left: 0px!important">
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md8">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md6">
                            <div class="layui-card">
                                <div class="layui-card-header">快捷方式</div>
                                <div class="layui-card-body">
                                    <div class="layadmin-shortcut">
                                        <ul class="layui-row layui-col-space10 layui-this">
                                            <li class="layui-col-xs3">
                                                <a data-options="{url:'JJGL/JJFB/JJFB.aspx',icon:'&#xe642;',title:'竞价发布',id:'17'}">
                                                    <i class="layui-icon">&#xe642;</i>
                                                    <cite>人员维护</cite>
                                                </a>
                                            </li>
                                            <li class="layui-col-xs3">
                                                <a data-options="{url:'GGFB/GGFB/EDIT.html',icon:'&#xe609;',title:'公告发布',id:'51'}">
                                                    <i class="layui-icon">&#xe609;</i>
                                                    <cite>排班计划</cite>
                                                </a>
                                            </li>
                                            <li class="layui-col-xs3">
                                                <a data-options="{url:'GGFB/GGFB/EDIT.html',icon:'&#xe609;',title:'公告发布',id:'51'}">
                                                    <i class="layui-icon">&#xe609;</i>
                                                    <cite>拣货任务</cite>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="layui-col-md6">
                            <div class="layui-card">
                                <div class="layui-card-header">数据统计</div>
                                <div class="layui-card-body">
                                    <div class="layadmin-backlog">
                                        <ul class="layui-row layui-col-space10 layui-this">
                                            <li class="layui-col-xs6">
                                                <a lay-href="" data-options="{url:'JJGL/JXZDJJ/JXZDJJ.aspx',icon:'',title:'进行中的竞价项目',id:'19'}" class="layadmin-backlog-body">
                                                    <h3>在班人数</h3>
                                                    <p><cite id="jxz">5</cite></p>
                                                </a>
                                            </li>
                                            <li class="layui-col-xs6">
                                                <a lay-href="" data-options="{url:'JJGL/JXZDJJ/JXZDJJ.aspx',icon:'',title:'进行中的竞价项目',id:'19'}" class="layadmin-backlog-body">
                                                    <h3>拣货数量</h3>
                                                    <p><cite id="jxzxj">1200</cite></p>
                                                </a>
                                            </li>
                                            <li class="layui-col-xs6">
                                                <a lay-href="" data-options="{url:'SBGL/WSB/WSB.aspx',icon:'',title:'未授标',id:'56'}" class="layadmin-backlog-body">
                                                    <h3>装车数量</h3>
                                                    <p><cite id="wsb">1000</cite></p>
                                                </a>
                                            </li>
                                            <li class="layui-col-xs6">
                                                <a lay-href="" data-options="{url:'GYSGL/GYSDSH/GYSWH.aspx',icon:'',title:'供应商待审核',id:'39'}" class="layadmin-backlog-body">
                                                    <h3>待定</h3>
                                                    <p><cite id="dsh">？</cite></p>
                                                </a>
                                            </li>

                                        </ul>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="layui-col-md12">
                            <div class="layui-card">
                                <div class="layui-card-header">数据概览</div>
                                <div class="layui-card-body">
                                    <div class="layui-carousel layadmin-carousel layadmin-dataview" lay-filter="dataview" style="width: 100%; height: 280px;">
                                        <div carousel-item="" id="LAY-index-dataview">
                                            <div id="sstd"></div>
                                            <div id="jjs"></div>


                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-col-md6">
                            <div class="layui-card">
                                <div class="layui-card-header">数据概览</div>
                                <div class="layui-card-body">
                                    <div id="zb" style="width:100%;height:350px"></div>
                                </div>
                            </div>
                                </div>
                            <div class="layui-col-md6">
                                <div class="layui-card">
                                    <div class="layui-card-header">数据概览</div>
                                    <div class="layui-card-body">
                                        <div id="jsc" style="width:100%;height:350px"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                       
                    </div>
                </div>
                


                <div class="layui-col-md4">
                    
                    <div class="layui-card">
                        <div class="layui-card-header">实时监控（2018-01-26）</div>
                        <div class="layui-card-body layadmin-takerates">
                            <div class="layui-progress" lay-showpercent="no" lay-filter="shjc">
                                <h3>收货进程</h3>
                                <div class="layui-progress-bar layui-bg-blue"><span class="layui-progress-text"></span></div>
                            </div>
                            <div class="layui-progress" lay-showpercent="no" lay-filter="lzsj">
                                <h3>轮置上架</h3>
                                <div class="layui-progress-bar layui-bg-green"><span class="layui-progress-text"></span></div>
                            </div>

                            <div class="layui-progress" lay-showpercent="no" lay-filter="lzxj">
                                <h3>轮置下架</h3>
                                <div class="layui-progress-bar" style="background-color:#e4ae9c!important"><span class="layui-progress-text"></span></div>
                            </div>
                            <div class="layui-progress" lay-showpercent="no" lay-filter="jhjc">
                                <h3>拣货进程</h3>
                                <div class="layui-progress-bar" style="background-color:#b6ff00!important"><span class="layui-progress-text"></span></div>
                            </div>
                            <div class="layui-progress" lay-showpercent="no" lay-filter="zcjc">
                                <h3>装车进程</h3>
                                <div class="layui-progress-bar" style="background-color:#00ffff!important"><span class="layui-progress-text"></span></div>
                            </div>
                            <div class="layui-progress" lay-showpercent="no" lay-filter="sumsjc">
                                <h3>SUMS进程</h3>
                                <div class="layui-progress-bar" style="background-color:#8e7e73!important"><span class="layui-progress-text"></span></div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card">
                        <div class="layui-card-header">系统公告</div>
                        <div class="layui-card-body layui-text layadmin-text">
                            <p>在夏暉，我們在意的不只是實現什麼成就，更重要的是如何實現。我們的企業精神描繪出我們早期的努力以及未來成長與成功的藍圖。唯有忠於這些原則，我們才能達成『實踐承諾』的使命。</p>
                        </div>
                    </div>
                    <div class="layui-card">
                        <div class="layui-card-header">系统概览</div>
                        <div class="layui-card-body layui-text">
                            <table class="layui-table">
                                <colgroup>
                                    <col width="140">
                                    <col>
                                </colgroup>
                                <tbody>
                                    <tr>
                                        <td>系统名称</td>
                                        <td>
                                            智慧仓储人员管理系统
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>官网地址</td>
                                        <td>
                                            <a style="cursor:pointer" href="http://www.baidu.com" target="_blank">http://www.baidu.com</a>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>当前版本</td>
                                        <td>
                                            v 1.0.1
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>基于框架</td>
                                        <td>
                                            layui-v2.2.5
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>服务器环境</td>
                                        <td>.NET + SQL SERVER + IIS</td>
                                    </tr>


                                </tbody>
                            </table>
                        </div>
                    </div>


                </div>
                <script src="../plugins/echarts.min.js"></script>
                <script src="../plugins/layui2/layui.js"></script>

                <script>
                    layui.config({

                        version: '1.7.17',
                    })
                    layui.use(['carousel', 'jquery', 'element'], function () {
                        var $ = layui.$;
                        var element = layui.element;
                        var common = layui.common;

                        var carousel = layui.carousel;


                        var n = 0, timer = setInterval(function () {
                            n = n + Math.random() * 10 | 0;
                            if (n > 100) {
                                n = 100;
                                clearInterval(timer);

                            }
                            element.progress('shjc', n + '%');
                            element.progress('lzsj', n + '%');
                            element.progress('lzxj', n + '%');
                            element.progress('jhjc', n + '%');
                            element.progress('zcjc', n + '%');
                            element.progress('sumsjc', n + '%');
                        }, 300 + Math.random() * 1000);








                        carousel.render({
                            elem: '.layadmin-dataview'
                             , width: '100%'
                             , arrow: "none"
                             , anim: "fade"
                             , autoplay: false
                             , indicator: "outside"
                             , trigger: "hover"
                        });


                        function jjfbsl() {
                            var myChart = echarts.init(document.getElementById('jjs'));
                            var option = {
                                title: {
                                    text: 'PFP实时统计'
                                },
                                legend: {
                                    data: ['收货量', '拣货量', '装车量']
                                },
                                xAxis: {
                                    data: ["张三", "李四", "王五", "赵六"]
                                },
                                toolbox: {
                                    show: true,
                                    feature: {
                                        magicType: { show: true, type: ['line', 'bar'] },
                                        saveAsImage: { show: true }
                                    }

                                },
                                yAxis: {},
                                series: [{
                                    name: '收货量',
                                    type: 'bar',
                                    data: [10, 123, 324, 532]
                                }, {
                                    name: '拣货量',
                                    type: 'bar',
                                    data: [10, 323, 133, 222]
                                },
                                  {
                                      name: '装车量',
                                      type: 'bar',
                                      data: [323, 124, 432, 222]
                                  }]
                            };
                            myChart.setOption(option);
                            myChart.resize();
                            window.onresize = function () {
                                myChart.resize();
                            };
                        }














                        var myChart2 = echarts.init(document.getElementById('sstd'));
                        function randomData() {
                            now = new Date(+now + oneDay);
                            value = value + Math.random() * 21 - 10;
                            return {
                                name: now.toString(),
                                value: [
                                    [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
                                    Math.round(value)
                                ]
                            }
                        }
                        var data = [];
                        var now = +new Date(1997, 9, 3);
                        var oneDay = 24 * 3600 * 1000;
                        var value = Math.random() * 1000;
                        for (var i = 0; i < 1000; i++) {
                            data.push(randomData());
                        }

                        var option2 = {
                            title: {
                                text: '实时拣货数量'
                            },
                            tooltip: {
                                trigger: 'axis',
                                formatter: function (params) {
                                    params = params[0];
                                    var date = new Date(params.name);
                                    return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
                                },
                                axisPointer: {
                                    animation: false
                                }
                            },
                            xAxis: {
                                type: 'time',
                                splitLine: {
                                    show: false
                                }
                            },
                            yAxis: {
                                type: 'value',
                                boundaryGap: [0, '100%'],
                                splitLine: {
                                    show: false
                                }
                            },
                            series: [{
                                name: '模拟数据',
                                type: 'line',
                                showSymbol: false,
                                hoverAnimation: false,
                                data: data
                            }]
                        };

                        myChart2.setOption(option2);
                        setInterval(function () {

                            for (var i = 0; i < 5; i++) {
                                data.shift();
                                data.push(randomData());
                            }

                            myChart2.setOption({

                                series: [{
                                    type: 'line',
                                    data: data
                                }]
                            });
                        }, 1000);


                        carousel.on('change(dataview)', function (res) {

                            jjfbsl();

                        });














                        var zbmyChart = echarts.init(document.getElementById('zb'));
                        var option3 = {
                            title: {
                                text: '今日货物比例',
                                subtext: '纯属虚构',
                                x: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                data: ['干货', '冻货', '藏货', '鲜活']
                            },
                            series: [
                                {

                                    type: 'pie',
                                    radius: '55%',
                                    center: ['50%', '60%'],
                                    data: [
                                        { value: 335, name: '干货' },
                                        { value: 310, name: '冻货' },
                                        { value: 234, name: '藏货' },
                                        { value: 135, name: '鲜活' }
                                    ],
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };

                        zbmyChart.setOption(option3);
                        zbmyChart.resize();
                        window.onresize = function () {
                            zbmyChart.resize();
                        };








                        var jscChart = echarts.init(document.getElementById('jsc'));
                        var option4 ={
                            tooltip: {
                                formatter: "{a} <br/>{c} {b}"
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    restore: { show: true },
                                    saveAsImage: { show: true }
                                }
                            },
                            series: [
                                {
                                    name: '速度',
                                    type: 'gauge',
                                    z: 3,
                                    min: 0,
                                    max: 220,
                                    splitNumber: 11,
                                    radius: '50%',
                                    axisLine: {            // 坐标轴线
                                        lineStyle: {       // 属性lineStyle控制线条样式
                                            width: 10
                                        }
                                    },
                                    axisTick: {            // 坐标轴小标记
                                        length: 15,        // 属性length控制线长
                                        lineStyle: {       // 属性lineStyle控制线条样式
                                            color: 'auto'
                                        }
                                    },
                                    splitLine: {           // 分隔线
                                        length: 20,         // 属性length控制线长
                                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                            color: 'auto'
                                        }
                                    },
                                    axisLabel: {
                                        backgroundColor: 'auto',
                                        borderRadius: 2,
                                        color: '#eee',
                                        padding: 3,
                                        textShadowBlur: 2,
                                        textShadowOffsetX: 1,
                                        textShadowOffsetY: 1,
                                        textShadowColor: '#222'
                                    },
                                    title: {
                                        // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                        fontWeight: 'bolder',
                                        fontSize: 20,
                                        fontStyle: 'italic'
                                    },
                                    detail: {
                                        // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                        formatter: function (value) {
                                            value = (value + '').split('.');
                                            value.length < 2 && (value.push('00'));
                                            return ('00' + value[0]).slice(-2)
                                                + '.' + (value[1] + '00').slice(0, 2);
                                        },
                                        fontWeight: 'bolder',
                                        borderRadius: 3,
                                        backgroundColor: '#444',
                                        borderColor: '#aaa',
                                        shadowBlur: 5,
                                        shadowColor: '#333',
                                        shadowOffsetX: 0,
                                        shadowOffsetY: 3,
                                        borderWidth: 2,
                                        textBorderColor: '#000',
                                        textBorderWidth: 2,
                                        textShadowBlur: 2,
                                        textShadowColor: '#fff',
                                        textShadowOffsetX: 0,
                                        textShadowOffsetY: 0,
                                        fontFamily: 'Arial',
                                        width: 100,
                                        color: '#eee',
                                        rich: {}
                                    },
                                    data: [{ value: 40, name: 'km/h' }]
                                },
                                {
                                    name: '转速',
                                    type: 'gauge',
                                    center: ['20%', '55%'],    // 默认全局居中
                                    radius: '35%',
                                    min: 0,
                                    max: 7,
                                    endAngle: 45,
                                    splitNumber: 7,
                                    axisLine: {            // 坐标轴线
                                        lineStyle: {       // 属性lineStyle控制线条样式
                                            width: 8
                                        }
                                    },
                                    axisTick: {            // 坐标轴小标记
                                        length: 12,        // 属性length控制线长
                                        lineStyle: {       // 属性lineStyle控制线条样式
                                            color: 'auto'
                                        }
                                    },
                                    splitLine: {           // 分隔线
                                        length: 20,         // 属性length控制线长
                                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                            color: 'auto'
                                        }
                                    },
                                    pointer: {
                                        width: 5
                                    },
                                    title: {
                                        offsetCenter: [0, '-30%'],       // x, y，单位px
                                    },
                                    detail: {
                                        // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                        fontWeight: 'bolder'
                                    },
                                    data: [{ value: 1.5, name: 'x1000 r/min' }]
                                },
                                {
                                    name: '油表',
                                    type: 'gauge',
                                    center: ['77%', '50%'],    // 默认全局居中
                                    radius: '25%',
                                    min: 0,
                                    max: 2,
                                    startAngle: 135,
                                    endAngle: 45,
                                    splitNumber: 2,
                                    axisLine: {            // 坐标轴线
                                        lineStyle: {       // 属性lineStyle控制线条样式
                                            width: 8
                                        }
                                    },
                                    axisTick: {            // 坐标轴小标记
                                        splitNumber: 5,
                                        length: 10,        // 属性length控制线长
                                        lineStyle: {        // 属性lineStyle控制线条样式
                                            color: 'auto'
                                        }
                                    },
                                    axisLabel: {
                                        formatter: function (v) {
                                            switch (v + '') {
                                                case '0': return 'E';
                                                case '1': return 'Gas';
                                                case '2': return 'F';
                                            }
                                        }
                                    },
                                    splitLine: {           // 分隔线
                                        length: 15,         // 属性length控制线长
                                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                            color: 'auto'
                                        }
                                    },
                                    pointer: {
                                        width: 2
                                    },
                                    title: {
                                        show: false
                                    },
                                    detail: {
                                        show: false
                                    },
                                    data: [{ value: 0.5, name: 'gas' }]
                                },
                                {
                                    name: '水表',
                                    type: 'gauge',
                                    center: ['77%', '50%'],    // 默认全局居中
                                    radius: '25%',
                                    min: 0,
                                    max: 2,
                                    startAngle: 315,
                                    endAngle: 225,
                                    splitNumber: 2,
                                    axisLine: {            // 坐标轴线
                                        lineStyle: {       // 属性lineStyle控制线条样式
                                            width: 8
                                        }
                                    },
                                    axisTick: {            // 坐标轴小标记
                                        show: false
                                    },
                                    axisLabel: {
                                        formatter: function (v) {
                                            switch (v + '') {
                                                case '0': return 'H';
                                                case '1': return 'Water';
                                                case '2': return 'C';
                                            }
                                        }
                                    },
                                    splitLine: {           // 分隔线
                                        length: 15,         // 属性length控制线长
                                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                            color: 'auto'
                                        }
                                    },
                                    pointer: {
                                        width: 2
                                    },
                                    title: {
                                        show: false
                                    },
                                    detail: {
                                        show: false
                                    },
                                    data: [{ value: 0.5, name: 'gas' }]
                                }
                            ]
                        };

                        setInterval(function () {
                            option4.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
                            option4.series[1].data[0].value = (Math.random() * 7).toFixed(2) - 0;
                            option4.series[2].data[0].value = (Math.random() * 2).toFixed(2) - 0;
                            option4.series[3].data[0].value = (Math.random() * 2).toFixed(2) - 0;
                            jscChart.setOption(option4, true);
                        }, 2000);
                        jscChart.setOption(option4);
                        jscChart.resize();
                        window.onresize = function () {
                            jscChart.resize();
                        };








                    });


                </script>
</body>
</html>
